<template>
  <el-table
    :data="songs"
    @cell-dblclick="play"
    @cell-mouse-enter="enter"
    @cell-mouse-leave="leave"
    :max-height="height"
    style="width: 80vw"
    class="songs-table">
    <el-table-column
      label="歌曲"
      width="500">
      <template #default="scope">
        <div>
          <span
            class="iconfont love"
            :class="{
              'is-love': scope.row.isLove,
            }"
            v-text="scope.row.isLove ? '&#xf0145;' : '&#xe761;'"></span>
          <span> {{ scope.row.name }} </span>
          <div class="operation">
            <span
              @click="play(scope.row)"
              v-show="
                !isPlay ||
                current != songList.findIndex((item) => item.id == scope.row.id)
              "
              v-prevent
              class="iconfont"
              >&#xea6e;</span
            >
            <span
              @click="isPlay = false"
              v-show="
                isPlay &&
                current == songList.findIndex((item) => item.id == scope.row.id)
              "
              v-prevent
              class="iconfont">
              &#xea6d;</span
            >
            <span class="iconfont">&#xf0304;</span>
            <span class="iconfont">&#xe605;</span>
          </div>
        </div>
      </template>
    </el-table-column>
    <el-table-column
      prop="singer"
      label="歌手"
      width="320" />
    <el-table-column
      prop="album"
      label="专辑"
      width="320" />
    <el-table-column label="时长">
      <template #default="scope">
        <span> {{ transformTime(scope.row.time) }} </span>
      </template>
    </el-table-column>
  </el-table>
</template>

<script lang="ts" setup>
import { transformTime, getTheme, elMessage } from '../utils/util';
import { Song } from '../model';
import userFooterStore from '../store/footer';
import { storeToRefs } from 'pinia';
import { elMessageType } from '../model/enum';
import { nextTick } from 'vue';

//设置主题
const color = getTheme().get('fontColor');
const bg = getTheme().get('background');
const hover = getTheme().get('tableHover');
const props = withDefaults(
  defineProps<{
    songs: Song[];
    height?: string;
    isPlaylist?: boolean;
  }>(),
  {
    isPlaylist: false,
  }
);

const footer = userFooterStore();
const { songList, current, isPlay, playProcess, playTime } =
  storeToRefs(footer);

//播放单曲，显示操作行
const play = async (song: Song) => {
  if (song.available == '0' || song.available == '8') {
    const index = songList.value.findIndex((item) => item.id == song.id);
    if (index == -1) {
      if (current.value == 0) {
        if (isPlay) {
          isPlay.value = false;
        }
        playProcess.value = 0;
        playTime.value = 0;
        songList.value.unshift(song);
        await nextTick();
        isPlay.value = true;
      } else {
        songList.value.unshift(song);
        current.value = 0;
      }
    } else {
      if (current.value != index) {
        current.value = index;
      } else {
        isPlay.value = true;
      }
    }
  } else if ((song.available = '1')) {
    elMessage(elMessageType.INFO, '此歌曲为vip专属');
  } else if ((song.available = '10')) {
    elMessage(elMessageType.INFO, '此歌曲尚未拥有版权，请切换其它歌曲');
  }
};
//当鼠标进入时
const enter = (row: Song) => {
  const index = props.songs.findIndex((item) => item.id == row.id);
  const operations: NodeListOf<HTMLDivElement> =
    document.querySelectorAll('.operation');
  if (props.isPlaylist) {
    operations[index + 1].style.display = 'block';
  } else {
    operations[index].style.display = 'block';
  }
};
//当鼠标离开时
const leave = (row: Song) => {
  const index = props.songs.findIndex((item) => item.id == row.id);
  const operations: NodeListOf<HTMLDivElement> =
    document.querySelectorAll('.operation');
  if (props.isPlaylist) {
    operations[index + 1].style.display = 'none';
  } else {
    operations[index].style.display = 'none';
  }
};
</script>

<style lang="less">
@font-color: v-bind(color);
@table-hover: v-bind(hover);
@background: v-bind(bg);
@font-color-gray: #7b7b7b;
@font-color-green: #1ed2a9;

.is-love {
  color: #ff6a6a !important;
}
.songs-table {
  .iconfont {
    font-size: 16px;
    margin-right: 6px;
    cursor: pointer;
    transition: 0.4s;
    color: @font-color-gray;
    &:hover {
      color: rgba(31, 207, 158, 0.8);
    }
  }

  tbody tr:hover > td {
    transition: 0.4s;
    background: @table-hover !important;
  }

  tbody .el-table__row:hover .operation {
    display: block;
  }
  .el-table__row > td {
    transition: background 0s !important;
    border: none;
    font-size: 13px;
    color: @font-color;
    padding: 12px 0 12px 1px;
    background: @background !important;
    .cell > div {
      display: flex;
      align-items: center;
      position: relative;
      .operation {
        color: @font-color-gray;
        position: absolute;
        right: 30px;
        display: none;
        span {
          margin: 5px;
        }
      }
    }
  }
  &::before {
    //去掉最下面的那一条线
    height: 0px;
  }
  &:deep(.is-leaf) {
    border: none !important;
  }
  th.el-table__cell.is-leaf {
    border: none !important;
    font-size: 12px;
    font-weight: 500;
    background-color: @background !important;
  }

  .el-table__inner-wrapper::before {
    height: 0 !important;
  }
}
</style>
